<template>
  <div class="base-echarts">
    <div ref="echartDivRef" :style="{width:width,height:height}">
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted,defineProps,withDefaults,watchEffect} from 'vue'
import { EChartsOption } from 'echarts';
import useEchart from '../hooks/useEcharts'
const echartDivRef = ref<HTMLElement>()

//定义类型以及默认值
const props = withDefaults(defineProps<{
  options:EChartsOption
  width?:string,
  height?:string
}>(),{
  width:'100%',
  height:'360px'
})
onMounted(()=>{
  const {setOptions} = useEchart(echartDivRef.value!)
  watchEffect(()=>{
    setOptions(props.options)
  })
})
</script>

<style>

</style>